<template>
  <!--工具条-->
  <div>
    <el-col :span="24" class="toolbar" style="padding-right: 0px;">
      <el-form :inline="true" :model="PageData">
        <el-form-item>
         <el-input v-model="PageData.keyword" placeholder="科室搜索"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">科室查询</el-button>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

  <el-table :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="department"
      label="科室"
         >
    </el-table-column>

    <el-table-column
      prop="courtyard"
      label="院区"
      >
    </el-table-column>
    <el-table-column
      prop="addr"
      label="地址"
        >
    </el-table-column>

    <el-table-column
      prop="date"
      label="时间">
    </el-table-column>
  <!--操作界面-->
    <el-table-column label="操作" width="150">
      <template scope="scope">
        <el-button type="warning" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" v-perm="'dept:deleteById'" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :background="true"
      :page-size="PageData.pageSize"
      :current-page="currentPage"
      :total="total"
      style="float:right;">
    </el-pagination>

    <!--新增，编辑页面-->
    <el-dialog :title="myTitle" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="科室名称" prop="department">
          <el-input v-model="editForm.department" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属院区" prop="courtyard">
          <el-input v-model="editForm.courtyard" auto-complete="off"></el-input>
        </el-form-item>
        <!--无线极树-->
        <el-form-item label="上级科室">
          <!--<el-input v-model="editForm.parent"></el-input>-->
          <!--这个数据保存到parent中-->
          <el-cascader v-model="editForm.parent"
                       :options="deptTree"
                       :props="{
                checkStrictly: true,
                value:'id',
                label:'department' //label才是选中的字段
                }" arable></el-cascader>
        </el-form-item>

        <el-form-item label="科室位置" prop="courtyard">
          <el-input v-model="editForm.addr" auto-complete="off"></el-input>
        </el-form-item>
        <el-switch
          v-model="state"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { listDept_detail, getDeptTree_detail,getDept_detail, delDept_detail, addDept_detail, updateDept_detail } from "@/api/hosptial/dept";
import result from "@/components/Crontab/result";

export default {

  data() {
    return {
      state:'true',
      editFormVisible:false,
      myTitle:'',
      tableData: [],
      total:0,
      pageSize:'',

      /*新增，编辑表单*/
      editForm:{
        id:'',
        department:'',
        courtyard:'',
        addr:'',
        parent:'',
      },
      deptTree:[],
      /*ruesls*/
      editFormRules: {//表单 校验规则
        department: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        courtyard: [
          { required: true, message: '请输入院区', trigger: 'blur' }
        ]
      },
      PageData :{
        currentPage:1,
        pageSize:5,
        keyword: null,//关键字
      },
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    /*新增*/
    handleAdd(){
      this.myTitle="科室新增";
     this.editFormVisible=true;
      this.getDeepTree();
      this.editForm={  //表单置空。
        id:'',
        department:'',
        courtyard:'',
        addr:'',
        parent:'',
      }
    },

    // editSubmit(){
    //
    // },

    /** 提交按钮 */

    //编辑
    editSubmit: function () {
      //this.$refs 拿到当前页面上的所有ref
      //this.$refs.editForm  找editForm
      this.$refs.editForm.validate((valid) => {//主动开启表单校验
        if (valid) {//校验没问题
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;// 开启表单提交按钮忙等  防止你重复点击
            let para = Object.assign({}, this.editForm);
            //这里处理后端需要的数据格式  下午要用
            if(para.parent){//[2,7]   --   {"id":7}
              para.parent = {"id":para.parent[para.parent.length -1]}
            }
            addDept_detail(this.para).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getDepartmentList();
            });
                //数据删除要定位到第一页
                this.currentPage = 1;
                this.getDepartments();
          });
        }
      });
    },
    selsChange: function (sels) {//当前页面，所有选中的行的数据
      this.sels = sels;//把当前选中的所有行的数据，绑定给模型层，一会儿批量删除的时候用
    },
    /*提交结束*/
    /*无限极数*/
      getDeepTree(){

        getDeptTree_detail().then(response => {
          this.deptTree = response;
          this.loading = false;
        });
      },

    /*科室模糊查询*/
    search(){
      this.currentPage = 1;
      this.getDepartmentList();
    },
    /*分页功能*/
    handleCurrentChange(currentPage){
      this.PageData.currentPage =currentPage;
      this.getDepartmentList();

    },
  /*全区全部加上分页*/
    getDepartmentList(){
      this.loading = true;
      listDept_detail(this.PageData).then(response => {
        this.tableData = response.data.rows;
        this.total = response.data.total;
        console.log(this.total)
        this.loading = false;
      });

    },
  },
  /*钩子函数*/
  mounted() {
    this.getDepartmentList()
  }
}
</script>


<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
